<template>
    <div role="tabpanel" class="tab-pane active" id="Message">
        <ul class="list-group">
            <li class="list-group-item" v-for="message in messageList" :key="message.id">
                <RouterLink :to="`/home/message/msgdetail/${message.id}?content=${message.content}`">
                    {{ message.content }}
                </RouterLink>
            </li>
            <!-- <li class="list-group-item">
                 <a href="##">message02</a> 
                <RouterLink to="/home/message/msgdetail">message02</RouterLink>
            </li>
            <li class="list-group-item">
                 <a href="##">message03</a> 
                <RouterLink to="/home/message/msgdetail">message02</RouterLink>
            </li> -->
        </ul>
        <div class="alert alert-success" role="alert">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router' // 引入的是vuerouter提供的组件
import { ref } from 'vue'
import type { model } from '@/views/News/index.vue'


const messageList = ref<model[]>([
    { id: 10, content: '运庆红' },
    { id: 20, content: 'Lucky luck' },
    { id: 30, content: '윈칭훙' },
    { id: 40, content: 'yunqinghong' },
    { id: 50, content: 'Праздник.' },
    { id: 60, content: 'Glückstag.' },
])

</script>

<style scoped>

</style>